<template>
	<view >

		<!-- 头部 -->
		<mini-header title="支付订单"></mini-header>

		<div style="height: calc(100vh - 206px);">
			<!-- 订单信息 -->
			<view class="order-wrapper">
				<view class="wrap">
					<view class="top">
						<i class="icon i-success"></i>
						<view class="order-info">
							<view class="left">
								<view class="title">订单提交成功！</view>
								<view class="info-item" v-if="showPay">
									<text>请在</text>
									<text class="duration">{{min}}:{{sec}}</text>
									<text>内完成支付, 超时后将自动取消订单</text>
								</view>
								<!-- <view class="info-item address elip" :class="{'hide': showDetails}">
									<text>收货信息：</text>
									<text>{{order.consignee}}</text>
									<text>{{order.phone}}</text>
									<text>{{order.province}} {{order.city}} {{order.district}} {{order.address}}</text>
								</view> -->
							</view>
							<view class="right">
								<view class="pay-amount">
									<text>应付金额：</text>
									<text class="amount" v-if='type == 0'>{{order.orderAmount }}</text>
									<text class="amount" v-else>{{totalPrice }}</text>
									
									<text class="unit">元</text>
								</view>
								<view :class="['btn-detail', {'active': showDetails}]" @click="showDetails = !showDetails">
									<text>订单详情</text>
									<i class="icon i-right"></i>
								</view>
							</view>
						</view>
					</view>
					<view :class="['bottom', {'active': showDetails}]">
						<view class="bottom-wrap">
							<view class="detail-item">
								<view class="name">订单号码：</view>
								<view class="value orderno">{{order.orderId}}</view>
							</view>
							<view class="detail-item">
								<view class="name">收货信息：</view>
								<view class="value">
									<text>{{order.receiver}}</text>
									<text>{{order.mobile}}</text>
									<text>{{order.province}} {{order.city}} {{order.district}} {{order.addr}}</text>
								</view>
							</view>
							<!-- <view class="detail-item">
								<view class="name">商品名称：</view>
								<view class="value elip">{{order.goodsList}}</view>
							</view> -->
						</view>
					</view>
				</view>
			</view>
			
			<!-- 选择支付方式 -->
			<!-- <view class="payment-wrapper" v-if="showPay">
				<view class="wrap">
					<view class="tip">选择以下支付方式付款</view>
					<view class="pay-platform">
						<view class="title">支付平台</view>
						<view class="platform-wrap">
							<image class="platform" src="/static/image/pay/alipay.png" mode="aspectFill" @click="requestPayment(0)"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="payment-wrapper" v-else>
				<view class="wrap">
					<view class="tip">支付时间已过，请重新下单</view>
					
				</view>
			</view> -->
		</div>
		
		<!-- 支付弹窗 -->
		<zw-dialog :hidden="hiddenQrcode" :title="payMode == 0 ? '支付宝支付' : '微信支付'" :width="370" :height="400" @close="cancelPayment">
			<view class="qrcode-wrapper">
				<view class="qrcode-wrap">
					<image class="qrcode" :src="qrcodeUrl" mode="aspectFit"></image>
					<view class="logo-wrap">
						<image class="logo" :src="`/static/image/pay/${payMode == 0 ? 'alipay-logo.png' : 'wechat-logo.png'}`" mode="aspectFit"></image>
					</view>
				</view>
				<view class="tips">
					<view>请使用<text class="platform">{{payMode == 0 ? '支付宝' : '微信'}}</text>扫描</view>
					<view>二维码完成支付</view>
				</view>
			</view>
		</zw-dialog>

		<!-- 页脚 -->
		<zw-footer></zw-footer>

	</view>
</template>

<script>
	import miniHeader from '@/components/common/mini-header.vue';

	export default {
		components: {
			miniHeader
		},
		data() {
			return {
				timeRemaining: '',
				order: {},
				showDetails: false,
				qrcodeUrl: '',
				payMode: 0,
				hiddenQrcode: true,
				min:0,
				sec:0,
				end:0,
				id:'',
				totalPrice:0,
				goodeName:'',
				showPay:true,
				timer:1,
				type:0,//普通订单 1购物车订单
			}
		},
		onLoad(e) {
			if (!e.orderId) {
				uni.redirectTo({
					url: '/pages/index'
				});
				return;
			}
			this.id = e.orderId
			this.totalPrice = e.price
			this.goodeName = e.name
			this.getNum()
			this.end = e.time
			var now = Date.parse(new Date()).toString().substr(0,10);
			var end = Date.parse(new Date(this.end)).toString().substr(0,10);
			this.CountDown = Number(end - now)
			this.CountDownData()
			this.day = parseInt(this.CountDown / (24*60*60))
			this.hour = parseInt(this.CountDown / (60 * 60) % 24);
			this.min = parseInt(this.CountDown / 60 % 60);
			this.sec = parseInt(this.CountDown % 60);
			// this.checkOrderStatus()
			if(this.id.length > 20){
				var id = e.orderId.split(',');
				this.id = id[0]
				this.type = 1
			}
			this.findBaseDetails(this.id);
		},
		
		onUnload() {
			var that = this;
			clearTimeout()
			that.timer = 0
			
		},
		methods: {
			getNum(){
				this.uni_request({
					url: '/user/cart/number',
					method:'get',
					success:(res) => {
						if(res.data.code == 0 || res.data.code == 200){
							this.resetSetItem('sellerCartNum', res.data.data);
						}else{
							uni.showToast({
								icon:"none",
								title:res.data.msg
							})
						}
					}
				})
			},
			cancelPayment(){
				this.hiddenQrcode = true;
				this.timer = 0
			},
			//查询订单状态
			checkOrderStatus(){
				var that = this;
				var url = "/user/order/payStatus/"+that.id
				this.uni_request({
					url:url,
					method:'POST',
					success: (res) => {
						that.payClick = false
						var data = res.data.data
						if(res.data.code == 0 || res.data.code == 200){
							uni.showToast({
								title:'支付成功',
								icon:'success',
							})
							that.waitSuccess();
							that.timer = 0
						}else{
						
							if(that.timer>0){
								setTimeout(function() {
									that.checkOrderStatus()
								}, 2000);
							}
						}
					}
				})
			},
			findBaseDetails(orderNo) {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				
				this.uni_request({
					url: '/user/order/detail' ,
					method: 'GET',
					data:{
						orderId:orderNo
					},
					success: (res) => {
						uni.hideLoading();
						if (res.data.code == 0 || res.data.code == 200) {
							this.order = res.data.data
						} else {
							
						}
					}
				})
				
				
			},
			
			requestPayment(mode) {
				uni.showLoading({
					title: '请求中...',
					mask: true
				});
				uni.hideLoading();	
				this.uni_request({
					url: '/pcPay/aliPay/standardPc/xikaWeb/' + this.order.id,
					method: 'POST',
					success: (res) => {
						uni.hideLoading();
						if (res.data.code == 0 || res.data.code == 200) {
							if(res.data.data.code == 0){
								this.qrcodeUrl = res.data.data.data
								this.payMode = mode;
								this.hiddenQrcode = false;
								this.timer = 1;
								this.checkOrderStatus()
							}
							
						} else {
							this.$alert(res.data.msg, {
								showCancel: false
							});
						}
					}
				})
				
				
			},
			waitSuccess() {
				uni.navigateTo({
					url: `/pages/order/pay/pay-success?orderNo=${this.order.id}`
				});
			},
			
			CountDownData(){
				var that = this;
				that.setTimer = setTimeout(() =>{
					that.CountDown--;
					that.day = parseInt(that.CountDown / (24*60*60))
					that.hour = parseInt(that.CountDown / (60 * 60) % 24);
					that.min = parseInt(that.CountDown / 60 % 60);
					that.sec = parseInt(that.CountDown % 60);
					if(that.hour<10){
						that.hour = '0' + that.hour
					}
					if(that.min<10){
						that.min = '0' + that.min
					}
					if(that.sec<10){
						that.sec = '0' + that.sec
					}
					
					if(that.CountDown <= 0){
						uni.showToast({
							title:'支付时间已过'
						})
						that.showPay = false
						return;
					}
					that.CountDownData();
				},1000)
			},　
		}
	}
</script>

<style lang="scss">
	.order-wrapper {
		background-color: $bg-color-grey;
		padding-top: 38px;
		padding-bottom: 30px;
		
		.wrap {
			background-color: $bg-color;
			max-width: $page-width;
		min-width: $page-minwidth;
			margin: 0 8vw;

			.top {
				display: flex;
				padding: 38px;

				.i-success {
					font-size: 100px;
					color: $color-success;
					margin-right: 48px;
				}

				.order-info {
					flex: 1;
					@extend %flex-align-center;
					justify-content: space-between;

					.left {

						.title {
							margin-bottom: 10px;
							font-size: 24px;
							line-height: 36px;
						}

						.info-item {
							color: #616161;
							margin-bottom: 5px;
							line-height: 2;

							.duration {
								margin: 0 5px;
								color: $color-primary;
							}

							&.address {
								max-width: 600px;

								text {
									margin-right: 10px;
								}

								&.hide {
									animation: hide .3s forwards;

									@keyframes hide {
										from {
											opacity: 1;
										}

										to {
											opacity: 0;
										}
									}
								}
							}
						}
					}

					.right {
						text-align: right;

						.pay-amount {
							margin-bottom: 20px;
							color: #757575;

							.amount {
								font-size: 24px;
								color: $color-primary;
							}

							.unit {
								color: $color-primary;
							}
						}

						.btn-detail {
							cursor: pointer;
							color: #757575;

							.icon {
								margin-left: 5px;
								font-size: 12px;
								font-weight: bold;
								display: inline-block;
								transform: rotate(90deg);
								transition: all .3s;
							}

							&:hover {
								color: $color-primary;
							}

							&.active {

								.icon {
									transform: rotate(-90deg);
								}
							}
						}
					}
				}
			}

			.bottom {
				height: 0;
				overflow: hidden;
				transition: height .6s;

				&.active {
					height: 150px;
				}

				.bottom-wrap {
					padding: 30px 0;
					border-top: 1px solid $border-color;
					margin-top: 10px;
					margin-left: 185px;
					margin-right: 38px;

					.detail-item {
						@extend %flex-align-center;
						line-height: 2;
						color: $text-color;

						.name {
							width: 85px;
						}

						.value {
							max-width: 900px;

							&.orderno {
								color: $color-primary;
							}

							text {
								margin-right: 10px;
							}
						}
					}
				}
			}
		}
	}

	.payment-wrapper {
		background-color: $bg-color-grey;
		padding-bottom: 38px;
		min-height: 380px;
		.wrap {
			max-width: $page-width;
		min-width: $page-minwidth;
			margin: 0 8vw;
			background-color: $bg-color;

			.tip {
				color: #424242;
				padding: 30px 0;
				margin: 0 48px;
				border-bottom: 1px solid $border-color;
				font-size: 18px;
			}

			.pay-platform {
				padding: 30px 48px;

				.title {
					font-size: 16px;
					font-weight: bold;
					color: #616161;
					margin-bottom: 20px;
				}

				.platform {
					width: 174px;
					height: 60px;
					cursor: pointer;
					margin-right: 14px;
					border: 1px solid $border-color;
					transition: border-color .3s;

					&:hover {
						border-color: $color-primary;
					}
				}
			}
		}
	}

	.qrcode-wrapper {
		width: 100%;

		.qrcode-wrap {
			width: 290px;
			height: 290px;
			position: relative;
			margin: 30px auto 10px;

			.qrcode {
				width: 100%;
				height: 100%;
			}
			
			.logo-wrap {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 45px;
				height: 45px;
				background-color: $bg-color;
				padding: 3px;
				border-radius: 10px;
				box-shadow: 0 0 5px $bg-color;
				
				.logo {
					width: 100%;
					height: 100%;
				}
			}
		}

		.tips {
			margin-bottom: 10px;
			color: $text-color;
			text-align: center;

			.platform {
				color: $color-primary;
				margin: 0 5px;
			}
		}
	}
</style>
